class carlZoom {
  carlzoom;
  slides;
  paging;
  dots = [];
  prev;
  next;
  slideLen;
  dotHeight = 70;
  pagingHeight;
  dotSize = 5;
  dotIndex = 0;
  mobileWidth = 768;
  constructor(params) {
    this.carlzoom = document.querySelector(".carlzoom-container");
    if (!this.carlzoom) return;
    if (this.windowWidth() <= this.mobileWidth) {
      this.dotSize = 3;
    }
    this.wrapper = this.carlzoom.querySelector(".carlzoom-wrapper");
    this.slides = this.carlzoom.querySelectorAll(".carlzoom-slide");
    this.slideLen = this.slides.length;
    this.paging = this.carlzoom.querySelector(".carlzoom-paging");
    this.prev = this.carlzoom.querySelector(".carlzoom-prev");
    this.next = this.carlzoom.querySelector(".carlzoom-next");
    this.dotwrapper = this.carlzoom.querySelector(".carlzoom-dotwrapper");
  }
  windowWidth(){
    return document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
  }
  prevAndNextBtnStatus() {
    if (this.slideLen <= this.dotSize) {
      this.prev.style.display = "none";
      this.next.style.display = "none";
    }
  }
  // 商城轮播图 生成缩略图
  _createPaging() {
    var _this = this;

    _this.slides.forEach(function (slide, index) {
      var div = document.createElement("div");
      div.classList.add("carlzoom-dot");
      
      if (index === 0) div.classList.add("on");
      var imgs = slide.querySelector("img").cloneNode(true);
      div.appendChild(imgs);
      _this.dotwrapper.appendChild(div);
      _this.dots.push(div);
    });

    this._setdotHW();
  }
  _setdotHW() {
    var _this = this;
    _this.dots.forEach(function(dot){
      dot.style.height = _this.dotHeight + "px";
      dot.style.width = _this.dotHeight + "px";
    });
  }
  _setdotHeight() {
    this.pagingHeight = this.paging.offsetHeight;
    var jj = this.windowWidth() <= this.mobileWidth ? 10 : 20;
    this.dotHeight = this.pagingHeight / this.dotSize - jj;
  }
  // 统一 slide大图区域 的高度=宽度
  _slideUnifiedHeight() {
    var w = this.slides[0].clientWidth;
    this.carlzoom.style.height = w + "px";
  }
  _zoomSwiper() {
    var _this = this;
    _this.dots.forEach(function (dot, index) {
      dot.addEventListener("mouseenter", function () {
        _this._dotsClearStatus();
        this.classList.add("on");
        _this._slideClearStatus();
        _this.slides[index].classList.add("on");
      });
    });
  }
  
  _nextSlide() {
    var _this = this;
    _this.next.addEventListener("click", function () {
      ++_this.dotIndex;
      if (_this.slideLen - _this.dotSize < _this.dotIndex) {
        --_this.dotIndex;
        return;
      }
      _this.dotwrapper.style.transform =
        "translateY(" + (-_this.dotHeight - 20) * _this.dotIndex + "px)";
    });
  }
  _prevSlide() {
    var _this = this;
    _this.prev.addEventListener("click", function () {
      --_this.dotIndex;
      if (_this.dotIndex<0) {
        ++_this.dotIndex;
        return;
      }
      _this.dotwrapper.style.transform =
        "translateY(" + (-_this.dotHeight - 20) * _this.dotIndex + "px)";
    });
  }
  _dotsClearStatus() {
    this.dots.forEach(function (dot) {
      dot.classList.remove("on");
    });
  }
  _slideClearStatus() {
    this.slides.forEach(function (slide) {
      slide.classList.remove("on");
    });
  }
  init() {
    this._slideUnifiedHeight();
    this._setdotHeight();
    this._createPaging();
    this._zoomSwiper();
    this.prevAndNextBtnStatus();
    this._nextSlide();
    this._prevSlide();
  }
  update() {
    this._slideUnifiedHeight();
    this._setdotHeight();
    this._setdotHW();
  }
}

export default carlZoom;
